<template>
  <div class="home_index">
    <div style="display:flex;align-items: center;margin-bottom:10px;margin-top:20px">
      <p style="margin-right:5px;flex-shrink:0">2子组件输入框</p>
      <el-input v-model="textVal" />
    </div>
    <el-button @click="checkVal">2子组件按钮</el-button>
  </div>
</template>
<script>
import { mapActions, mapGetters, mapMutations } from "vuex";  //vuex得各个方法   mapGetters放在computed里面 之后可以在当前页面用 this.userInfo 使用这个全局变量
export default {
  data(){
    return {
      textVal:'',   //这是子组件自己得data值
    }
  },
  components:{      //声明组件
  },
  created(){  
  },
  mounted(){
  },
  computed:{
    ...mapGetters({
      userInfo:"getUserInfo",
    }),
    
  },
  methods:{     //放一些函数(方法)      ... 为扩展运算符相当于是添加到这个对面里面去  this.getData() 使用这个方法  this.getNumber() 一样得意思 
    ...mapMutations({           
    }),
    ...mapActions({
      getNumber:'loginModule/getNumber',
      getUser:'loginModule/getUser'
    }),
    checkVal(){
      //这里是第二个组件按钮点击  我要发送个事件 告诉第一个组件我传个值给他 改变他得zujian2Val变量
      //第一种方法就是通过父组件做一个中转站 但是太麻烦了,这还只有一层,如果组件嵌套多层就不美了
      //第二种方法就是通过一个全局得vue实例,把所有组件得$emit()发送事件,放在同一个vue实例下
      //然后我在第二个组件 通过这个全局的this.$Bus发送一个方法,在第一个组件里面接受 把textVal输入框里的值传过去
      this.$Bus.$emit('zujian2Check',this.textVal);
    }
  },
}
</script>           
<style lang="scss" scoped>  
// scoped 只在这个页面有效得css样式  不污染全局
</style>